<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
    /* Dummy rule for increasing max-direct-adjacent */
    .x + .x + .x + .x { color: red }

    span, .p + .r { color: green }
    .a + .d, .b + .c, .r { color: red }
</style>
<div id="insertTest">
    <span class="a"></span>
    <span class="b"></span>
    <span class="c"></span>
    <span class="d"></span>
</div>
<div id="removeTest">
    <span class="a"></span>
    <span class="a2"></span>
    <span class="b"></span>
    <span class="c"></span>
    <span class="d"></span>
</div>
<div id="removeTest2">
    <span class="p"></span>
    <span class="q"></span>
    <span class="r"></span>
</div>
<script>
    test(() =>
        assert_not_equals(window.internals, undefined, "Check that window.internals is defined.")
    , "window.internals required for tests.");

    test(() => {
        var c = insertTest.querySelector(".c");
        assert_equals(getComputedStyle(c).color, "rgb(255, 0, 0)", "Check that .c is initially red.");

        insertTest.insertBefore(document.createElement("span"), c);

        assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Recalc for the inserted element and .c.");
        assert_equals(getComputedStyle(c).color, "rgb(0, 128, 0)", "Check that .c is green after insertion.");
    }, "Check that we don't invalidate too much on sibling insertion.");

    test(() => {
        var c = removeTest.querySelector(".c");
        assert_equals(getComputedStyle(c).color, "rgb(255, 0, 0)", "Check that .c is initially red.");

        removeTest.querySelector(".b").remove();

        assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Recalc for .c.");
        assert_equals(getComputedStyle(c).color, "rgb(0, 128, 0)", "Check that .c is green after .b is removed.");
    }, "Check that we don't invalidate too much on sibling removal.");

    test(() => {
        var r = removeTest2.querySelector(".r");
        assert_equals(getComputedStyle(r).color, "rgb(255, 0, 0)", "Check that .r is initially red.");

        removeTest2.querySelector(".q").remove();

        assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Recalc for .r");
        assert_equals(getComputedStyle(r).color, "rgb(0, 128, 0)", "Check that .r is green after .q is removed.");
    }, "Check that we don't invalidate past removed element for sibling removal.");
</script>
